<template>
  <div class="warp">
    <div class="header">
      <h4>我的全部购物车（{{ cartList.length }}）</h4>
    </div>
    <div class="main">
      <div class="item" v-for="(item, index) in cartList" :key="index">
        <div class="title">
          <h4 @click="ToShop(item.shopId)">{{ item.shopName }}</h4>
        </div>
        <div class="shop" v-for="(item2, index2) in item.items" :key="index2">
          <div class="shoppic">
            <img :src="item2.img" />
          </div>
          <div class="right">
            <p class="shop_name">{{ item2.name }}</p>
            <p>
              <span class="number">{{ item2.price }} x{{ item2.number }} </span>
              <span class="total_price"
                >¥{{ (item2.price * item2.number).toFixed(2) }}</span
              >
            </p>
          </div>
        </div>

        <!-- <div class="close">共计3件/1.4kg</div> -->
      </div>
    </div>
    <docker></docker>
  </div>
</template>
<script>
import Docker from "../components/Docker.vue";

export default {
  name: "Cart",
  components: { Docker },
  created() {
    let cartList = this.$store.state.shop.cartList;
    //清理下数据,商品为0的删除
    cartList.forEach(productList => {
       productList.items=productList.items.filter((item)=>{
           return item.number>0;
       })
      cartList= cartList.filter((item)=>{
           return item.items.length>0;
       })
    });
    this.cartList = cartList;

   
  },
  data() {
    return {
      cartList: [],
    };
  },
  methods: {
    ToShop(id) {
      this.$router.push({
        path: "/Shop",
        query: {
          shopId: id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.continer {
  padding: 0 18px;
}
.warp {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  .header {
    background-color: white;
    height: 44px;
    text-align: center;

    line-height: 44px;
    h4 {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #333333;
    }
  }
  .main {
    margin: 0 18px;
    .item {
      margin: 16px 0px;
      background-color: white;
      padding: 16px;
      .title {
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #333333;
      }

      .shop {
        margin-top: 16px;
        display: flex;

        .shoppic {
          margin-right: 16px;
          img {
            width: 46px;
            height: 46px;

            border: none;
          }
        }
        .right {
          flex: 1;
          position: relative;
          .shop_name {
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #333333;
          }
          p {
            line-height: 23px;
          }
          .price {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #e93b3b;
            text-align: right;
          }
          .number {
            font-family: PingFangSC-Regular;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #e93b3b;
          }
          .total_price {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #000000;
            text-align: right;
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }
      .close {
        margin-top: 16px;
        height: 28px;
        background: #f5f5f5;
        line-height: 28px;
        text-align: center;
        font-family: PingFangSC-Light;
        font-size: 14px;
        color: #999999;
      }
    }
  }
}
</style>